<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 选择图片后，需要点击提交按钮，才开始上传，可以不需要form标签 -->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>ajax上传图片</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<img id="success_img" height="100px">
<br>

<input type="file" id="upload_file">

<!-- 保存图片的相对路径，方便提交给后台，存到数据库 -->
<input type="hidden" name="" id="img_path"/>
<input type="button" id="uploadPicButton" value="上传">

<div>
    <a href="" id="download" download=""></a>
</div>
<script>
    //上传图片
    $('#uploadPicButton').click(function () {
        var pic = $('#upload_file')[0].files[0];
        var fd = new FormData();
        fd.append('uploadFile', pic);
        $.ajax({
            url:"http://localhost:8090/uploadFile",
            type:"post",
            data: fd,   // Form数据
            cache: false,
            contentType: false,
            processData: false,
            success:function(res){
                if (res.meta.errorCde == 0) {
                    window.location.href=res.data;
                }else{
                    console.log(res);
                    
                }
                
            }
        });
    })
</script>
</body>
</html>